/**
 * 抖音店铺评分数据记录侧边栏组件
 */

import { StyleProvider } from "@ant-design/cssinjs"
import { DeploymentUnitOutlined } from "@ant-design/icons"
import cssText from "data-text:~/assets/css/dataScreenV2.css"
import antdResetCssText from "data-text:antd/dist/reset.css"
import ky from "ky"
import moment from "moment"
import type {
    PlasmoCSConfig,
    PlasmoGetInlineAnchor,
    PlasmoGetShadowHostId,
    PlasmoGetOverlayAnchor
} from "plasmo"
import React, { useEffect, useState } from "react"


import { usePort } from "@plasmohq/messaging/hook"
import { useStorage } from "@plasmohq/storage/dist/hook"
import { ThemeProvider } from "~theme"
import DyShopScoreDataDetailModal from "~ui_components/DyShopScoreDataDetailModal"
import { _callApi } from "~utils/tools"

import DyBicCrawerModal from "~ui_components/DyBicCrawerModal"
import { Button } from "antd"



// 注入配置
export const config: PlasmoCSConfig = {
    matches: [
        // 抖音抖店商家体验分页面
        "https://fxg.jinritemai.com/ffa/qic*"
    ],
    run_at: "document_start"
    // all_frames: true
}

// 注入样式
export const getStyle = () => {
    const style = document.createElement("style")
    style.textContent = cssText + antdResetCssText
    return style
}

// 注入的shadow dom的id
export const HOST_ID = "dy-bic-tool"
export const getShadowHostId: PlasmoGetShadowHostId = () => HOST_ID

// export const getRootContainer = () => document.getElementById("app")
export const getInlineAnchor: PlasmoGetInlineAnchor = async () => {
    return {
        element: document.querySelector("div[class^='src-pages-old-order-order-printer-orderList-index-module__mid-msuy'] > div:nth-child(2)"),
        insertPosition: "afterbegin"
    }
    // return document.querySelector("div[class^='src-pages-old-order-order-printer-orderList-index-module__mid-msuy'] > div:nth-child(2)")
}

// 组件定义
const DyBicToolBar = () => {
    // 获取用户登录状态
    const [userLogin] = useStorage("isLogin", false)
    // BIC数据抓取Modal显示状态
    const [showBicModal, setShowBicModal] = useState(false)


    // 显示Modal方法
    const handleShowModal = () => {
        setShowBicModal(true)
    }

    // 关闭Modal方法
    const handleClose = () => {
        setShowBicModal(false)
    }



    return (
        <ThemeProvider>
            <StyleProvider container={document.getElementById(HOST_ID).shadowRoot}>
                {userLogin ? (
                    // <div className={"dy-shop-score-tool-wrapper"}>
                    //     <div className={"button-item"} onClick={handleShowModal}>
                    //         <DeploymentUnitOutlined />
                    //     </div>
                    //     {/*文字描述*/}
                    //     <div className={"button-text"}>
                    //         <span>BIC抓取</span>
                    //     </div>
                    // </div>
                    // <Button type="primary" onClick={handleShowModal}>
                    //     BIC抓取
                    // </Button>
                    <div className="dy-shop-bic-button" onClick={handleShowModal}>BIC批量抓取</div>
                ) : null}
                <DyBicCrawerModal showBicModal={showBicModal} handleClose={handleClose} />
            </StyleProvider>
        </ThemeProvider>
    )
}

export default DyBicToolBar

